<!-- 吸毒人员 -->
<template lang="html">
 <div class="main">
   <panel title="社会面分布 /" class="panel">
        <router-link style="font-size: 16px;color: #000; font-family: 新宋体;" slot="left" :to="{ path: '/stat/index'}">吸毒人员统计</router-link>
     <div class="" slot="right">
       <el-select v-model="year" size="small" style="width: 120px;">
           <el-option
             v-for="item in [2013, 2014, 2015, 2016, 2017]"
             :key="item"
             :label="item === 2017 ? '今天' : `${item + 1}年`"
             :value="item">
           </el-option>
         </el-select>
     </div>
     <div class="body">
       <div class="body-pie">
         <div class="item">
           <div id="stat_sh" class="chart">
           </div>
           <div class="chart-title" id="stat_sh_title" v-show="stat_sh_show" style="margin-top: -30px;">
             社会面<br>人数
           </div>
         </div>
         <div class="item">
           <div id="stat_qj" class="chart">
           </div>
           <div class="chart-title" id="stat_qj_title" v-show="stat_qj_show">
             强戒人数
           </div>
         </div>
       </div>
       <div class="body-map"  v-loading="loading" element-loading-text="拼命加载中" element-loading-background="transparent">
         <div class="map-title" v-show="showLabel">
           【{{selectPlace}}】
         </div>
         <div class="map-title-2" v-show="showLabel">
           <div>高风险人数：{{num.high}}人</div>
           <div>中风险人数：{{num.center}}人</div>
           <div>低风险人数：{{num.low}}人</div>
         </div>
         <div class="map" id="stat_wrxdl_map">
         </div>
       </div>
     </div>
   </panel>
 </div>
</template>

<script>
import panel from '@/components/panel.vue';
import {ShMapData} from '@/common/js/sh-map-data';
import fetchStatDrugNum from './xdyData';
export default {
  data () {
    return {
      stat_qj_show: true,
      stat_sh_show: true,
      selectPlace: '',
      showLabel: false,
      year: 2017,
      charts: {},
      loading: false,
      num: {
        'high': 0,
        'center': 0,
        'low': 0
      },
      data: [],
      notShowTitle: [
        '虹口区',
        '长宁区',
        '静安区',
        '黄浦区',
        '普陀区',
        '徐汇区',
        '杨浦区'
      ]
    };
  },
  components: {
    panel
  },
  watch: {
    year (v) {
      // TODO 查询年刷新图表
      this.fetchData();
    },
    selectPlace (v) {
      let name = v === '全市' ? '上海' : v;
      let place = this.data.find(n => n.name === name);
      this.num = {
        'high': place.gfx,
        'center': place.zfx,
        'low': place.dfx
      };
    }
  },
  methods: {
    drawPie (id, { name, data }) { // 画大饼
      let chart = this.charts[id];
      let option = {
        tooltip: {
          position: ['10%', '10%'],
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: data.map(d => d.name)
        },
        color: data.map(d => d.color),
        series: [
          {
            name: name,
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '27',
                  fontWeight: 'bold'
                }
              }
            },
            itemStyle: {
              emphasis: {
                show: true,
                shadowColor: 'rgba(100, 100, 100, 0.5)',
                shadowOffsetX: -5,
                shadowBlur: 20
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: data
          }
        ]
      };
      chart.setOption(option, true);
      chart.on('mouseover', () => {
        this[`${id}_show`] = false;
      });
      chart.on('mouseout', () => {
        this[`${id}_show`] = true;
      });
    },
    drawMap (id) {
      // 社会面
      let h = 0;
      let l = 0;
      let data = this.data.filter(d => d.name !== '上海').map(d => {
        if (d.gfx > h) {
          h = d.gfx;
        }
        if (l === 0 || d.gfx < l) {
          l = d.gfx;
        }
        return {name: d.name, value: d.gfx, zfx: d.zfx, dfx: d.dfx};
      });
      let chart = this.charts[id];
      chart.hideLoading();
      this.$echarts.registerMap('SH', ShMapData);

      chart.setOption({
        title: {
          top: '90%',
          left: '3%',
          text: '上海市',
          subtext: (this.year + 1) + '各区社会面吸毒情况统计'
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{b}<br/>{c} (人)'
          formatter (d) {
            return `${d.name}<br/><div style="text-align: left;">高风险人数：${d.data.value}人<br/>中风险人数：${d.data.zfx}人<br/>低风险人数：${d.data.dfx}人</div>`;
          }
        },
        visualMap: {
          min: l,
          max: h,
          text: ['高', '低'],
          left: '86%', // 组件离容器左侧的距离,'left', 'center', 'right','20%'
          top: '2%',
          // orient: 'horizontal',
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#78aede', '#478fcf', '#3b82c4']
          }
        },
        series: [
          {
            name: '上海市各区吸毒人数',
            type: 'map',
            selectedMode: 'single',
            mapType: 'SH', // 自定义扩展图表类型
            zoom: 1.2,
            itemStyle: {
              normal: {label: {
                show: true,
                formatter: (params) => {
                  if (this.notShowTitle.indexOf(params.data.name) !== -1) {
                    return '';
                  }
                }
              }},
              emphasis: {
                label: {show: true, color: '#fff'},
                borderWidth: 2,
                borderColor: '#efefef',
                areaColor: '#51ade7'
              }
            },
            data: data
          }
        ]
      });
      chart.on('mapselectchanged', (param) => {
        let name = param.batch[0].name;
        let select = param.batch[0].selected[name];
        if (select) {
          // 选中
          this.selectPlace = name;
          this.load(this.data.find(n => n.name === name));
        } else {
          this.selectPlace = '全市';
          this.load(this.data.find(n => n.name === '上海'));
        }
      });
    },
    load ({gaqj = 1, sfqj = 0, gfx = 1, zfx = 0, dfx = 0}) {
      this.drawPie('stat_qj', {name: '强戒机构人数',
        data: [
          {value: gaqj, name: '公安强戒', color: '#438C79'},
          {value: sfqj, name: '司法强戒', color: '#42A851'}
        ]});
      this.drawPie('stat_sh', {name: '社会面吸毒人数',
        data: [
          {value: dfx, name: '低风险类', color: '#C8AA3E'},
          {value: zfx, name: '中风险类', color: '#484183'},
          {value: gfx, name: '高风险类', color: '#CF800F'}
        ]});
    },
    fetchData () {
      this.load({});
      this.loading = true;
      // fetchStatDrugNum({year: this.year}).then(res => {
      let res = fetchStatDrugNum;
      this.data = res.data;
      // {name: 崇明区, gaqj,sfqj,gfx,zfx,dfx}
      let sh = {name: '上海', gaqj: 0, sfqj: 0, gfx: 0, zfx: 0, dfx: 0};
      this.data.forEach(d => {
        sh.gaqj += d.gaqj;
        sh.sfqj += d.sfqj;
        sh.gfx += d.gfx;
        sh.zfx += d.zfx;
        sh.dfx += d.dfx;
      });
      this.data.push(sh);
      this.selectPlace = '全市';
      this.load(sh);
      this.num = {
        'high': sh.gfx,
        'center': sh.zfx,
        'low': sh.dfx
      };
      this.loading = false;
      this.drawMap('stat_wrxdl_map');
      this.showLabel = true;
      // }).catch(err => {
      //   console.log(err);
      //   this.$message(`加载数据失败！请联系负责人`);
      // });
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.charts['stat_wrxdl_map'] = this.$echarts.init(document.getElementById('stat_wrxdl_map'));
      this.charts['stat_qj'] = this.$echarts.init(document.getElementById('stat_qj'));
      this.charts['stat_sh'] = this.$echarts.init(document.getElementById('stat_sh'));
      window.addEventListener('resize', () => {
        this.charts['stat_wrxdl_map'].resize();
        this.charts['stat_qj'].resize();
        this.charts['stat_sh'].resize();
      });
    });
    setTimeout(_ => {
      this.loading = true;
      this.fetchData();
    }, 600);
  }
};
</script>

<style lang="css" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  .panel {
    width: 100%;
    height: 100%;
   .body {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: row;
     align-items: stretch;
     padding-left: 10px;
     .body-pie {
       width: 30%;
       height: 100%;
       display: flex;
       padding: 5px;
       flex-direction: column;
       .item {
         width: 100%;
         height: 100%;
         position: relative;
         .chart {
           position: absolute;
           z-index: 1;
           width: 100%;
           height: 100%;
         }
         .chart-title {
           position: absolute;
           z-index: 0;
           width: 100%;
           top: 50%;
           margin-top: -16px;
           vertical-align: middle;
           text-align: center;
           font-size: 25px;
           color: #999;
           font-weight: 800;
         }
       }
       .item::after {
         content: '';
         position: absolute;
         width: 90%;
         height: 3px;
         top: 98%;
         left: 5%;
         right: 5%;
         overflow: hidden;
         /* border-top: 1px solid  rgba(150,150,150,.5); */
         border-bottom: 1px solid  rgba(255,255,255,1);
         background-color: #eee;
       }
     }
     .body-map {
       width: 70%;
       margin: 5px;
       position: relative;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
       .map-title {
         position: absolute;
         left: 5px;
         top: 20px;
         font-size: 20px;
         color: #1A71C1;
         font-weight: 600;
       }
       .map-title-2 {
         position: absolute;
         text-align: left;
         left: 20px;
         top: 50px;
         font-size: 14px;
         color: #666;
       }
       .map {
         width: 100%;
         height: 100%;
         /* width: 120%;
         height: 120%;
         margin-top: -50px;
         margin-left: -60px; */
         /* background-color: rgba(0,0,0,.5); */
       }
     }
     .body-map::before {
       content: '';
       position: absolute;
       width: 3px;
       height: 92%;
       top: 4%;
       left: -3px;
       overflow: hidden;
       /* border-left: 1px solid  rgba(150,150,150,.5); */
       border-right: 1px solid  rgba(255,255,255,1);
       background-color: #eee;
     }
   }
  }
}

</style>
